<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
	<fieldset>
		<legend>商品</legend>
		<div>
			<div class='form-group'>
			<label class='col-md-2 control-label'>商品号</label>
			<div class='col-md-10'>
				<input class='form-control   input-sm' placeholder='' type='text' name='sku_new' id='sku_new' data-bv-notempty='true' > 

				<input class='form-contro   input-sm' placeholder='1' type='text' name='quantity_new' id='quantity_new' data-bv-notempty='true' >

				<button class="btn btn-primary" type="" onclick="addItem()">
						<i class="fa layui-btn-xs add"></i> 加入购买
				</button>
			</div>
		</div>
	</fieldset>


	<form class="form-horizontal" onsubmit="return false" id="form">
		
		<fieldset>
			<div id="goods_table_div">
				
				<table class="layui-table table table-bordered" id="goods_table" lay-filter="table">
	                <thead>
	                    <tr>
	                    	<td>商品号</td>
	                    	<td>商品名</td>
	                        <td>数量</td>
	                        <td>价格</td>
	                        <td></td>
	                    </tr>
	                </thead>
	                <tbody>
	                    <tr style="display: none;" id="exampleCopy">
	                    	<td class="sku_td"></td>
	                    	<td class="goods_name_td"></td>
	                    	<td class="quantity_td"><input type="text"  class="layui-input input-sm" name="quantity[]" value=""></td>
	                        <td class="price_td"></td>
	                        <td>
	                        	<input type="hidden" class="sku_hidden"  name="sku[]" value="">
	                            <a class="layui-btn layui-btn-danger layui-btn-xs del" onclick="deltr(this);">删除</a>
	                        </td>
	                    </tr>
	                </tbody>
	            </table>

			</div>
		</fieldset>

		<fieldset>
			<div class='form-group'>
				<label class='col-md-2 control-label'>商品总数量</label>
				<div class='col-md-10'>
					<input class='form-control input-sm' placeholder='0' type='text' readonly="true" name='quantity_total' id='quantity_total' data-bv-notempty='true' data-bv-notempty-message='quantity 不能为空'>
				</div>
			</div>
			<div class='form-group'>
				<label class='col-md-2 control-label'>订单总额</label>
				<div class='col-md-10'>
					<input class='form-control input-sm' placeholder='0' type='text' readonly="true" name='amount' id='amount' data-bv-notempty='true' data-bv-notempty-message='amount 不能为空'>
				</div>
			</div>
			<div class='form-group'>
				<label class='col-md-2 control-label'>支付总额</label>
				<div class='col-md-10'>
					<input class='form-control input-sm' placeholder='0' type='text' name='payAmount' id='payAmount' data-bv-notempty='true' data-bv-notempty-message='payAmount 不能为空'>
				</div>
			</div>

			<div class="form-actions">
				<div class="row" align="center">
					<div class="col-md-12">
					    <button class="btn btn-primary" onclick="location.href='pSaleOrdersList.html'">返回</button>
						<button class="btn btn-primary" type="submit" onclick="save()">
							<i class="fa fa-save"></i> 确认提交
						</button>
					</div>
				</div>
			</div>

		</fieldset>

		

	</form>
</div>
	<script type="text/javascript" src="../../js/libs/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../js/jq.js"></script>
	<script type="text/javascript" src="../../js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
	<script type="text/javascript" src="../../js/common.js"></script>
	<script type="text/javascript" src="../../layui/layui.js"></script>
	<script type="text/javascript">
		layui.use(['layer','laydate','table'], function(){
		    var layer = layui.layer;
		});
		
		function save() {
			$('#form').bootstrapValidator();
			var bootstrapValidator = $("#form").data('bootstrapValidator');
			bootstrapValidator.validate();
		    if(!bootstrapValidator.isValid()){
			   return;
		    }
		    debugger;
		    var formdata = $("#form").serializeObject();

			$.ajax({
				type : 'post',
				url : '/pSaleOrderss/saveAll',
				//contentType: "application/json; charset=utf-8",  
				data : formdata, //JSON.stringify(formdata),
				success : function(data) {
					if(data.code==0 ){
						layer.msg("销售单成功", {shift: -1, time: 1000}, function(){
	                        location.href = "pSaleOrdersList.html";
	                    });
					}else if(data.message){
						layer.msg(data.message);
					}else{
						layer.msg("销售单失败");
					}
				}
			});
		}

		function addItem() {
		    var quantity = $("#quantity_new").val();
		    var d={
		        'sku':$("#sku_new").val(),
		     };
		     $.ajax({
		        type : 'post',
		        url : '/pSaleOrderss/addItem',
		        data : d,
		        success : function(data) {
		        	if(data.code==0 && data.data){
		        		tableAddTr(data.data,quantity);
		        		tableCult();
		        	}else if(data.message){
		        		layer.msg(data.message);
		        	}else{
		        		layer.msg("添加失败");
		        	}
		        }
		    });
		}

		function tableAddTr(row,quantity){
			if(parseFloat(quantity).toString() == "NaN"){
				quantity=1;
			}
			var newTr = $("#exampleCopy").clone();
			newTr.find(".sku_td").html(row.sku);
			newTr.find(".sku_hidden").val(row.sku);
			newTr.find(".sku_td").html(row.sku);
			newTr.find(".goods_name_td").html(row.goodsName);
			newTr.find(".quantity_td input").val(quantity);
			newTr.find(".price_td").html(row.price);
			$(newTr.show()).appendTo($('#goods_table tbody:last'));
		}

		function tableCult(){
			let quantity=0;
			let amount=0;
			$("#goods_table tbody tr").each(function(e){
					let price = $(this).find(".price_td").html() ;
					let q = $(this).find(".quantity_td input").val() ;
					if(price && q ){
						if(parseFloat(q).toString() == "NaN"){
							q=0;
						}
						if(parseFloat(price).toString() == "NaN"){
							price=0;
						}
						quantity+= parseFloat(q);
						amount += parseFloat(price) * parseFloat(q);
					}
			});

			$("#quantity_total").val(quantity);
			$("#amount").val(amount);
		}

		function deltr(e) {
			$(e).closest('tr').remove();
			tableCult();
		}
		
	</script>
</body>
</html>
